<template>
	<view class="top">
		<up-avatar :src="data?.avatar" shape="circle" size="60"> </up-avatar>
		<view class="right">
			<h3 class="text">{{data?.user_name}}</h3>
			<view class="text2">{{data?.signature}}</view>
		</view>
		<view class="pen" @click="goUserDtail()">
			<up-icon name="edit-pen" size="25" color="#dd524d"></up-icon>
		</view>
	</view>
	<up-cell-group border="false">
		<up-cell icon="file-text-fill" title="帖子" isLink arrow-direction="right" :value="data?.posts_count"
			@click="goMyPost"></up-cell>
		<up-cell icon="heart-fill" title="关注" isLink arrow-direction="right" :value="data?.followers_count"
			@click="goFollowersList"></up-cell>
		<up-cell icon="account-fill" title="粉丝" isLink arrow-direction="right" :value="data?.fans_count"
			@click="goFansList"></up-cell>
		<up-cell icon="star-fill" title="收藏" isLink arrow-direction="right" :value="data?.collections_count"
			@click="goCollectionList"></up-cell>
		<up-cell icon="setting-fill" title="设置" isLink arrow-direction="right" @click="goSetting "></up-cell>
	</up-cell-group>

</template>

<script lang="ts" name="user" setup>
	import { ref, onMounted, inject } from 'vue'
	import { GetUserinfo } from '../../apis/user'
	import userStore from '../../store/modules/user'
	import {
		onShow
	} from "@dcloudio/uni-app";
	let src = 'https://tupian.qqw21.com/article/UploadPic/2020-7/202071322581129212.jpg';
	let data = ref()
	const useStore = userStore();
	// onMounted(() => {
	// 	GetUserinfoData()
	// })
	onShow(() => {
		GetUserinfoData()
	})
	//用户详情
	const goUserDtail = function () {
		uni.navigateTo({
			url: `/pages/userDetail/userDetail`
		})
	}
	//我的粉丝
	const goFansList = function () {
		uni.navigateTo({
			url: `/pages/fansList/fansList`
		})
	}
	//我的关注
	const goFollowersList = function () {
		uni.navigateTo({
			url: `/pages/followersList/followersList`
		})
	}
	//我的发布
	const goMyPost = function () {
		uni.navigateTo({
			url: `/pages/myPost/myPost`
		})
	}
	//收藏
	const goCollectionList = function () {
		uni.navigateTo({
			url: `/pages/collectionList/collectionList`
		})
	}
	//设置
	const goSetting = function () {
		uni.navigateTo({
			url: `/pages/setting/setting`
		})
	}
	//获取用户信息
	const GetUserinfoData = async () => {
		console.log('获取用户信息');
		try {
			console.log(useStore.user_id);
			const userdata = {
				user_id: useStore.user_id
			}
			const res = await GetUserinfo(userdata);
			data.value = res.data
			console.log(data.value);
		} catch (error) {
			// 错误处理逻辑
			console.error('An error occurred while executing Captcha function:', error);
		}
	}
</script>

<style scoped lang="scss">
	.top {
		position: relative;
		// justify-content: space-around;
		padding: 20upx 40upx 40upx 30upx;
		// box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;

		.right {
			top: 20upx;
			left: 146upx;
			position: absolute;
			margin-left: 30upx;
			margin-top: 20upx;

			.text {
				font-size: 40upx;
			}

			.text2 {
				font-size: 26upx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				width: 12em;
			}
		}

		.pen {
			top: 50upx;
			right: 40upx;
			position: absolute;
		}
	}

	.content {
		// box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
		// margin-top: 0upx;
		padding: 0upx 10upx 0upx 10upx;
	}
</style>